// 导入React和相关库
import React, { useState } from 'react';
// 导入Ant Design组件
import { Layout, Button, message } from 'antd';
import { PlayCircleOutlined } from '@ant-design/icons';
// 导入代码编辑器组件
import AceEditor from 'react-ace';
// 导入HTTP请求库
import axios from 'axios';
// 导入样式文件
import 'antd/dist/reset.css';
import 'ace-builds/src-noconflict/mode-python';
import 'ace-builds/src-noconflict/theme-github';
import './App.css';

const { Header, Content } = Layout;

function App() {
  // 定义状态变量
  const [code, setCode] = useState('');  // 代码编辑器内容
  const [result, setResult] = useState(null);  // 执行结果
  const [loading, setLoading] = useState(false);  // 加载状态

  // 处理代码执行
  const handleRun = async () => {
    setLoading(true);  // 开始加载
    try {
      // 发送POST请求到后端执行代码
      const response = await axios.post('http://localhost:8000/execute', code, {
        headers: {
          'Content-Type': 'text/plain'  // 设置请求头为纯文本
        }
      });
      setResult(response.data);  // 设置执行结果
    } catch (error) {
      // 错误处理
      message.error('执行出错：' + error.message);
    } finally {
      setLoading(false);  // 结束加载
    }
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      {/* 页面头部 */}
      <Header style={{ color: 'white' }}>Python 在线编译器</Header>

      {/* 页面内容区域 */}
      <Content style={{ padding: '24px' }}>
        <div style={{ display: 'flex', gap: '24px' }}>
          {/* 左侧代码编辑区域 */}
          <div style={{ flex: 1 }}>
            <AceEditor
              mode="python"  // 设置编辑器模式为Python
              theme="github"  // 使用GitHub主题
              onChange={setCode}  // 代码改变回调
              value={code}  // 编辑器内容
              name="code-editor"  // 编辑器名称
              editorProps={{ $blockScrolling: true }}
              width="100%"  // 宽度100%
              height="500px"  // 高度500px
              fontSize={18}  // 字体大小
              showPrintMargin={true}  // 显示打印边距
              showGutter={true}  // 显示行号
              highlightActiveLine={true}  // 高亮当前行
              setOptions={{
                enableBasicAutocompletion: true,  // 启用基本自动补全
                enableLiveAutocompletion: true,  // 启用实时自动补全
                enableSnippets: true,  // 启用代码片段
                showLineNumbers: true,  // 显示行号
                tabSize: 4,  // Tab大小为4个空格
              }}
            />
            {/* 运行按钮 */}
            <Button
              type="primary"
              icon={<PlayCircleOutlined />}
              onClick={handleRun}
              loading={loading}
              style={{ marginTop: '16px' }}
            >
              运行代码
            </Button>
          </div>

          {/* 右侧结果展示区域 */}
          <div style={{ flex: 1 }}>
            <h3>执行结果：</h3>
            {result && (
              <pre style={{
                backgroundColor: '#f5f5f5',  // 背景颜色
                padding: '16px',  // 内边距
                borderRadius: '4px',  // 圆角
                color: result.status === 'error' ? 'red' : 'green'  // 根据状态设置颜色
              }}>
                {result.output}
              </pre>
            )}
          </div>
        </div>
      </Content>
    </Layout>
  )
}

export default App
